/*
 * @Title: 娱乐-立即预定
 * @Created by: ycq 
 */
<template>
	<view class="order-body">
		<view v-if="showMask" class="mask" @click="closeMask"></view>
		<IndexHead :config='pageConfig'></IndexHead>
		<view class="order-head">
			<text class="order-hotel-name">{{hotel}}</text>
			<view class="food-info">
				<view style="width: 100%;height: auto;display: table;">
				<image class="food-img" src="/static/myPic/binguan.png" mode=""></image>
				<view class="order-right">
					<view class="item-title"  @click="showfoodDetail">
						<text class="title-text">黑白灰</text>
						<text class="title-price">￥88</text>
					</view>
					<text class="tip">周一至周日 |  免预约</text>
					<view class="hd-list">
						<view class="hd-item">
							<image class="item-img" src="/static/shop/choose.png" mode=""></image>
							<text class="item-text">免预约</text>
						</view>
						<view class="hd-item" style="margin-left: 20upx;">
							<image class="item-img" src="/static/shop/choose.png" mode=""></image>
							<text class="item-text">随时退</text>
						</view>
					</view>
					<view class="mile">
						<text style="color: #666666; font-size: 24upx;">据您3km</text>
						<view class="must">
							<text style="color: #5595FF; font-size: 20upx;">详情</text>
							<view class="line"></view>
							<text style="color: #5595FF; font-size: 20upx; margin-left: 10upx; margin-right: 5upx; margin-top: 5upx;">购买须知</text>
							<image style="width: 20upx; height: 21upx; margin-top: 10upx;" src="../../../static/jiantou.png" mode=""></image>
						</view>
					</view>
				</view>
				</view>
			</view>
		</view>
		<view class="order-info">
			<view class="order-item">
				<text class="order-label">数量</text>	
				<image src="/static/shop/jia.png" mode=""></image>
				<text class="order-num">2</text>
				<image v-if="false" src="/static/shop/cjian.png" mode=""></image>
				<image src="/static/shop/jian.png" mode=""></image>
			</view>
			<view class="order-items">
				<text class="order-label">联系人</text>	
				<!-- <text class="phone">王女士</text> -->
				<input type="text" readonly="readonly" placeholder="需填1人姓名" placeholder-style="color:#999999; margin-left:93upx" class="phones"/>
				<image src="../../../static/renyuan.png" mode=""></image>
			</view>
			<view class="order-items">
				<text class="order-label">联系方式</text>	
				<input type="text" readonly="readonly" placeholder="用于接收通知" placeholder-style="color:#999999; margin-left:80upx" class="phones"/>
				<image src="../../../static/address-book.png" mode=""></image>
			</view>
			<view class="order-item">
				<text class="order-label">实付金额</text>	
				<text class="order-price">￥176</text>
			</view>
			
		</view>
		<view class="order-bottom">
			<view class="btn" @click="pay">立即支付</view>
			<view class="btn2" v-if="!addedXc" @click="payXc">加入行程<br>暂不支付</view>
			<view class="btn2" style="line-height: 98upx;padding: 0;height: 98upx;" v-if="addedXc" >已加入行程</view>
			<view style="float: right;">
				<text class="price">￥176</text>
				<text class="sum">共计：</text>
				<!-- <view class="yh"><text>已优惠￥20</text></view> -->
			</view>
		</view>
		<view v-if="ifAdd" class="if-add-xc">
			<text>是否添加到“我的行程”中</text>
			<view class="add-xc-bottom">
				<view class="add-quxiao" @click="quxiaoXc">取消</view>
				<view class="add-add" @click="payXc">添加</view>
			</view>
		</view>
		<pay-view v-if='toPay'  pageId='food'></pay-view>
		<popuper v-if='this.$store.state.showAddCuss.show' ></popuper>
		<PaySuccess v-if='paySucc' :payData='payData'></PaySuccess>
		<xing-cheng  v-if='showXc'/>
	</view>
</template>

<script>
	import PaySuccess from '@/components/PaySuccess.vue'
	import popuper from '@/components/Popuper.vue'
	export default{
		data(){
			return{
				showXc:false,
				ifAdd:false,
				toPay:false,
				addedXc:false,
				paySucc:false,
				showMask:false,
				xcId:null,
				hotel:'密室逃脱',
				time: '12:01',
				startTime:'8月1日',
				payData:[],
				endeTime:'8月4日',
				day:3,
				pageConfig:{
					common:{
						hasSearch:false, //显示整版搜索框
						hasTitle:false, //显示页面title
						hasMenu:false,
						maxHead:true,
						pageId:'',
					},
					left:{
						showBack:true,
						img:'' , //左侧图标
						text:'', //左侧文字
					},
					mid:{
						title:'' ,//页面title
						hasSearchMid:false //显示中间搜索框
					},
				},
			}
		},methods:{
			bindTimeChange: function(e) {
				this.time = e.target.value
			},
			pay(){
				this.toPay = true
				this.showMask = true
				document.body.style.overflow = 'hidden'
			},
			exitPay(){
				this.toPay = false
				this.showMask= false
				document.body.style.overflow = 'scroll'
			},
			paySuccess(data){
				data.hotel = this.hotel
				this.payData = data
				this.toPay = false;
				this.paySucc = true;
			},
			closeMask(){
				this.exitPay()
			},
			closeBox(){
				this.paySucc = false;
				
				if(this.xcId!=null){
					this.$store.state.tabInd = 3
					uni.navigateTo({
						url:'../../gonglue/glTabbar'
					})
				}else{
					this.ifAdd = true
					// this.showMask= false
				}
			},
			payXc(){
				this.showXc = true
				// if(this.xcId!=null){
				// 	this.$store.state.tabInd = 3
				// 	uni.navigateTo({
				// 		url:'../../gonglue/glTabbar'
				// 	})
				// }else{
				// 	this.showXc = true
				// }
				 // this.$store.commit('showXcTypeUpdate',true)
				// uni.navigateTo({
				// 	url:'foodDetail'
				// })
			},
			toOrderByXc(){
				this.xcId =1
				this.showXc = false
			},
			closeXc(){
				uni.navigateTo({
					url:'/pages/home/Recreation/recreationDetail'
				})
				this.showXc=false
			},
			addXc(){
				// this.$store.state.tabInd = 3
				// uni.navigateTo({
				// 	url:'../../gonglue/glTabbar'
				// })
				this.showXc=false
				this.addedXc = true
				this.ifAdd =false
				this.showMask = false
			},
			quxiaoXc(){
				uni.navigateBack({
					delta:1
				})
			}
		},
		onLoad(options) {
			if(options!=null){
				if(options.xcId!=null){
					this.xcId = options.xcId
				}
			}
			console.log(options)
         },
		components:{
			PaySuccess,
			popuper
		}
	}
</script>

<style scoped>
	.order-body{
		width: 750upx;
		height: auto;
		position: relative;
	}
	.mask{
		width: 100%;
		height: 100vh;
		background: rgba(0,0,0,0.3);
		position: fixed;
		z-index: 25;
	}
	.order-head{
		width: 750upx;
		height: 400upx;
		position: absolute;
		top:150upx;
		/* background: #007AFF; */
		
	}
	.order-hotel-name{
		margin-left: 65upx;
		color: #FFFFFF;
		font-size: 38upx;
		font-weight: Regular;
		font-family: Microsoft YaHei Regular;
	}
	.food-info{
		width: 677upx;
		height: 248upx;
		border-radius: 20upx;
		margin-left: auto;
		margin-right: auto;
		background: #FFFFFF;
		margin-top: 20upx;
		box-shadow: 0px 0px 6px 0px #c5c5c5;
	}
	.food-img{
		width: 270upx;
		height: 193upx;
		margin-left: 25upx;
		margin-top: 28upx;
		float: left;
		border-radius: 10upx;
	}
	
	.order-right{
		width: 320upx;
		height: 182upx;
		float: right;
		margin-right: 30upx;
		margin-top: 28upx;
	}
	.item-title{
		width: 100%;
		margin-top: 5upx;
		height: 50upx;
	}
	.title-text{
		font-size: 30upx;
		line-height: 40upx;
		float: left;
	}
	.title-price{
		font-size: 30upx;
		float: right;
		line-height: 40upx;
		color: rgba(226,81,21,1.00);
	}
	.order-right image{
		width: 20upx;
		height: 23upx;
		float: right;
		margin-top: 12upx;
		font-size: 21upx;
		color: #666666;
	}

	.tip{
		width: 100%;
		display: block;
		margin-top: 5upx;
		font-size: 25upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		color: #999999;
	}

	.hd-list{
		width: 100%;
		height: 40upx;
		display: flex;
		margin-top: 10upx;
		flex-direction: row;
	}
	.hd-item{
		width: 120upx;
		height: 40upx;
		/* margin-left: 20upx; */
	}
	.item-img{
		width: 24px;
		height: 24px;
		margin-top: 8upx;
		margin-right: 20upx;
		float: left !important;
	}
	.item-text{
		float: left;
		font-size: 24upx;
		color: #55A0FF;
		line-height: 40upx;
	}
	.order-info{
		width: 677upx;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		background: #FFFFFF;
		border-radius: 20upx;
		margin-top: 180upx;
		box-shadow: 0px 0px 6px 0px #c5c5c5;
	}
	.order-item{
		width: 610upx;
		margin-left: auto;
		margin-right: auto;
		border-bottom: #E7E7E7 solid 1upx;
		height: 110upx;
	}
	.order-items{
		width: 610upx;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		flex-direction:row;
		justify-content:space-between; 
		border-bottom: #E7E7E7 solid 1upx;
		height: 110upx;
	}
	.order-item:last-child{
		border-bottom: none;
	}
	.order-items:last-child{
		border-bottom: none;
	}
	.order-label{
		font-size: 30upx;
		line-height: 110upx;
		margin-left: 28upx;
		float: left;
	}
	.order-item image{
		width: 30upx;
		height: 30upx;
		float: right;
		margin-top: 40upx;
		margin-right: 20upx;
	}
	.order-items image{
		width: 30upx;
		height: 30upx;
		float: right;
		margin-top: 40upx;
		margin-right: 20upx;
	}
	.order-num{
		font-size: 28upx;
		line-height: 110upx;
		float: right;
		margin-right: 20upx;
	}
	.order-price{
		font-size: 28upx;
		line-height: 110upx;
		color: #5776FE;
		float: right;
		margin-right: 28upx;
	}
	.phone{
		font-size: 28upx;
		line-height: 110upx;
		float: right;
		margin-right: 28upx;
	}
	.phones{
		font-size: 28upx;
		margin-top: 35upx;
	}
	
	
	
	
	

	.order-bottom{
		width: 750upx;
		height: 98upx;
		border-top: rgba(0,0,0,0.1) solid 1upx;
		position: fixed;
		z-index: 23;
		bottom: 0;
		background: #FFFFFF;
	}
	.order-bottom .btn{
		float: right;
		width: 200upx;
		height: 98upx;
		border: none;
		text-align: center;
		line-height: 98upx;
		color: #FFFFFF;
		font-size: 30upx;
		background: -webkit-linear-gradient(left, #54B0FF,#577AFF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B0FF,#577AFF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B0FF,#577AFF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B0FF,#577AFF);
		/* 标准的语法 */
	}
	.order-bottom .btn2{
		float: right;
		width: 200upx;
		height: 82upx;
		border: none;
		vertical-align: middle;
		text-align: center;
		padding-top: 16upx;
		line-height: 34upx;
		color: #FFFFFF;
		font-size: 30upx;
		background: -webkit-linear-gradient(left, #a0d3ff,#b1c1ff);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #a0d3ff,#b1c1ff);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #a0d3ff,#b1c1ff);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #a0d3ff,#b1c1ff);
		/* 标准的语法 */
	}
	.sum{
		float: right;
		color: #E25115;
		font-size: 30upx;
		line-height: 98upx;
		height: 40upx;
	}
	.price{
		float: right;
		color: #E25115;
		font-size: 36upx;
		line-height: 98upx;
		height: 8upx;
		margin-right: 23upx;
	}
	.yh{
		width: 100%;
		text-align: right;
	}
	.yh text{
		padding-left: 20upx;
		height: 35upx;
		font-size: 24upx;
		line-height: 35upx;
		padding-right: 20upx;
		border-radius: 20upx;
		margin-right: 23upx;
		color: #FFFFFF;
		background: -webkit-linear-gradient(left, #FE970A,#FF4E00);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #FE970A,#FF4E00);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #FE970A,#FF4E00);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #FE970A,#FF4E00);
		/* 标准的语法 */
	}
	
	.if-add-xc{
		width: 514upx;
		height: 246upx;
		border-radius: 20upx;
		background: #FFFFFF;
		position: fixed;
		top: 500upx;
		left: 118upx;
		text-align: center;
		z-index: 30;
	}
	.if-add-xc text{
		width: 100%;
		display: block;
		height: 40upx;
		margin-top: 73upx;
		font-size: 28upx;
	}
	.add-xc-bottom{
		width: 100%;
		height: 94upx;
		border-top: #E6E6E6 solid 1upx;
		position: absolute;
		bottom: 0;
	}
	.add-quxiao{
		width:257upx;
		height: 94upx;
		text-align: center;
		line-height: 94upx;
		color: #CCCCCC;
		float: left;
		font-size: 28upx;
	}
	.add-add{
		width:255upx;
		height: 94upx;
		text-align: center;
		line-height: 94upx;
		color: #55A0FF;
		float: right;
		font-size: 28upx;
		border-left: #E6E6E6 solid 1upx;
	}
	
	.mile{
		display: flex;
		flex-direction:row;
		justify-content:space-between; /*对齐方式*/
		margin-top: 15upx;
	}
	.must{
		display: flex;
		flex-direction:row;
		justify-content:flex-end; /*对齐方式*/
		/* margin-right: 41upx; */
	}
	.line{
		width: 1upx;
		height: 21upx;
		background: #5595FF;
		margin-left: 10upx;
		margin-top: 10upx;
	}
</style>
